<template>
  <div class="app-container">
    <el-form :model="queryParams" :inline="true">
        <el-form-item label="是否推荐" >
            <el-select
                class="query-el-input-width"
                v-model="queryParams.whetherRecommend"
                placeholder="请选择"
                clearable
                filterable
                style="width: 214px"
            >
                <el-option
                v-for="item in ['是','否']"
                :key="item"
                :value="item"
                :label="item"
                class="query-el-input-width"
                />
            </el-select>
        </el-form-item>
        <el-form-item label="是否置顶" >
            <el-select
                class="query-el-input-width"
                v-model="queryParams.whetherTop"
                placeholder="请选择"
                clearable
                filterable
                style="width: 214px"
            >
                <el-option
                v-for="item in ['是','否']"
                :key="item"
                :value="item"
                :label="item"
                class="query-el-input-width"
                />
            </el-select>
        </el-form-item>
        <el-form-item label="话题banner推荐" >
            <el-select
                class="query-el-input-width"
                v-model="queryParams.topicBannerRecommend"
                placeholder="请选择"
                clearable
                filterable
                style="width: 214px"
            >
                <el-option
                v-for="item in ['是','否']"
                :key="item"
                :value="item"
                :label="item"
                class="query-el-input-width"
                />
            </el-select>
        </el-form-item>
        <el-form-item label="话题" >
            <el-input
                v-model="queryParams.topicName"
                placeholder="请输入"
                clearable
                @keyup.enter="handleQuery"
            />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="addhandle">新增</el-button >
      </el-col>
    </el-row>
    <el-table  class="newClass" v-loading="loading" :data="localLifeTableList">
        <el-table-column label="序号" align="center" prop="id" />
        <el-table-column label="话题" align="center" prop="topicName" />
        <el-table-column label="内容" align="center" prop="content" >
            <template #default="scope">
                <div style="overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;">{{ scope.row.content }}</div>
            </template>
        </el-table-column>
        <el-table-column label="banner图" align="center" prop="bannerImg" width="180" >
          <template #default="scope">
              <div style="display: flex;">
                  <el-image
                    v-for="(url,index) in scope.row.bannerImg ? scope.row.bannerImg.split(',') : 0" :key="url"
                    :preview-teleported="true"
                    :z-index="99999999"
                    :initial-index="index"
                    :preview-src-list="scope.row.bannerImg.split(',')"
                    style="width: 100px; height: 100px" :src="url" fit="contain"
                  />
              </div>
          </template>
        </el-table-column>
        <el-table-column label="是否推荐" align="center" prop="whetherRecommend" />
        <el-table-column label="推荐排序" align="center" prop="sortNum" />
        <el-table-column label="是否置顶" align="center" prop="whetherTop" />
        <el-table-column label="话题banner推荐" align="center" prop="topicBannerRecommend" />
        <el-table-column label="话题banner排序" align="center" prop="topicBannerSort" />
        <el-table-column label="多少人参与" align="center" prop="personNum" />
        <el-table-column label="置顶头像" align="center" prop="topPicture" width="180" >
          <template #default="scope">
              <div style="display: flex;">
                  <el-image
                      v-for="(url,index) in scope.row.topPicture ? scope.row.topPicture.split(',') : 0" :key="url"
                      :preview-teleported="true"
                      :z-index="99999999"
                      :initial-index="index"
                      :preview-src-list="scope.row.topPicture.split(',')"
                      style="width: 100px; height: 100px" :src="url" fit="contain"
                  />
              </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
            <template #default="scope">
                <el-button link type="primary" @click="handleUpdate(scope.row)">编辑</el-button>
                <el-button link type="primary" @click="handleOpen(scope.row)">评论列表</el-button>
                <el-button link type="primary" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog title="话题" v-model="open" width="700">
        <el-form :model="form" label-width="130px">
            <el-form-item label="话题名称" prop="topicName">
                <el-input
                v-model="form.topicName"
                placeholder="话题名称"
                type="text"
                style="width: 215px"
                />
            </el-form-item>
            <el-form-item label="banner图" prop="bannerImg">
                <image-uploads v-model="form.bannerImg" isShow=" 请上传686 × 288 像素/2.39:1比例"></image-uploads>
            </el-form-item>
            <el-form-item label="内容" prop="content">
              <el-input v-model="form.content" type="textarea" autosize />
            </el-form-item>
            <el-form-item label="话题banner推荐" prop="topicBannerRecommend">
               <el-radio-group v-model="form.topicBannerRecommend">
                    <el-radio label="是">是</el-radio>
                    <el-radio label="否">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="话题banner排序" prop="topicBannerSort">
                <el-input
                v-model="form.topicBannerSort"
                placeholder="话题banner排序"
                type="text"
                style="width: 215px"
                />
            </el-form-item>
            <el-form-item label="是否推荐" prop="whetherRecommend">
               <el-radio-group v-model="form.whetherRecommend">
                    <el-radio label="是">是</el-radio>
                    <el-radio label="否">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="排序" prop="sortNum">
                <el-input
                v-model="form.sortNum"
                placeholder="排序"
                type="text"
                style="width: 215px"
                />
            </el-form-item>
            <el-form-item v-if="form.whetherRecommend == '是'" label="是否置顶" prop="whetherTop">
               <el-radio-group v-model="form.whetherTop">
                    <el-radio label="是">是</el-radio>
                    <el-radio label="否">否</el-radio>
                </el-radio-group>
            </el-form-item>
            
            <el-form-item v-if="form.whetherRecommend == '是'&&form.whetherTop == '是'" label="多少人参与" prop="personNum">
                <el-input
                v-model="form.personNum"
                placeholder="多少人参与"
                type="text"
                style="width: 215px"
                />
            </el-form-item>
            <el-form-item v-if="form.whetherRecommend == '是'&&form.whetherTop == '是'" label="参与人头像" prop="topPicture">
                <image-uploads v-model="form.topPicture"></image-uploads>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
            <el-button :loading="buttonLoading" :disabled="buttonLoading" type="primary" @click="submitForm">发布</el-button>
            <el-button @click="cancel">取 消</el-button>
            </div>
        </template>
    </el-dialog>
    <el-drawer
      v-model="table"
      title="帖子评论"
      direction="rtl"
      :close-on-click-modal="true"
      size="30%"
    >
      <div
        class="container"
        :infinite-scroll-distance="1"
        :infinite-scroll-immediate="false"
      >
        <div style="width: 100%; display: flex;justify-content: flex-end;">
          <el-button  type="primary" @click="commentReply()">评论</el-button>
        </div>

        <div class="comment" v-for="(item,index) in comments" :key="index">
          <div class="info">
            <img class="avatar" :src="item.avatar" width="36" height="36" />
            <div class="right">
              <div class="name">{{ item.nickname }}</div>
              <div class="date">{{ item.createTime }}</div>
            </div>
          </div>
          <div class="content">
            <div><span style="margin-right: 5px;color: #FF6720;">#{{topicName}}</span>{{ item.content }}</div>
          </div>
          <div class="control">
            <span class="like" :class="{ active: item.isLike }">
              <i class="iconfont icon-like"></i>
              <span class="like-num">{{
                item.likes > 0 ? item.likes + "人赞" : "0人赞"
              }}</span>
            </span>
          </div>
        </div>
      </div>
      <el-empty v-if="comments.length === 0" :image-size="300"></el-empty>
    </el-drawer>
    <!-- 回复评论 -->
    <el-dialog title="回复评论" v-model="commentReplyOpen" width="500px" append-to-body>
      <el-form ref="commentReplyRef" :model="form2" label-width="120px">
        <el-form-item label="发布人头像" prop="publisherAvatar">
          <image-uploads v-model="form2.publisherAvatar" :limit="1"></image-uploads>
        </el-form-item>
        <el-form-item label="发布人名称" prop="publisherName">
          <el-input v-model="form2.publisherName"  />
        </el-form-item>
        <el-form-item label="内容" prop="commentReplyContent">
            <el-input 
            v-model="form2.commentReplyContent" 
            type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading2" type="primary" @click="commentReplySubmitForm">确 定</el-button>
          <el-button @click="commentReplyCancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Topica">
import {ref} from "vue";
import {
  postComment
} from "@/api/system/hairPost";
import { xcxListHairComment } from "@/api/system/hairComment";
import {upNewTopic,newTopicList,addNewTopic,delNewTopic} from "@/api/business/newMiniProgram";
const localLifeTableList = ref([]);
const loading = ref(true);
const buttonLoading = ref(false);
const buttonLoading2 = ref(false);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
})
const { proxy } = getCurrentInstance();
const open = ref(false);
const form = ref({});
const form2 = ref({});
const total = ref(0);
const table = ref(false);
const postId = ref(null);
const comments = ref([]);
const commentReplyOpen = ref(false);//回复评论弹框
const topicName = ref('');
const handleOpen = (row) => {
  postId.value = row.id
  topicName.value = row.topicName
  table.value = true;
  getCommentList(row.id);
};
/** 查询极客侠小程序评论列表 */
function getCommentList(id) {
  const commentQueryParams = {
    pageNum: 1,
    pageSize: 9999,
    postId: id,
  };
  xcxListHairComment(commentQueryParams).then((response) => {
    comments.value = response.rows;
  });
}
function commentReply(){
  commentReplyOpen.value = true
  form2.value = {}
}
/** 回复提交按钮 */
function commentReplySubmitForm() {
  proxy.$refs["commentReplyRef"].validate(valid => {
    if(valid){
      let data = {
        postId:postId.value,
        type: "话题评论"
      }
      if(form2.value.publisherAvatar){
        data.avatar = form2.value.publisherAvatar
      }
      if(form2.value.publisherName){
        data.nickname = form2.value.publisherName
      }
      if(form2.value.commentReplyContent){
        data.content = form2.value.commentReplyContent
      }
      postComment(data).then(res=>{
        proxy.$modal.msgSuccess("回复成功");
        getCommentList(postId.value)
        commentReplyOpen.value = false
        form2.value.commentReplyContent = ''
      })
    }
  });
}
// 取消按钮
function commentReplyCancel() {
  commentReplyOpen.value = false
}





function addhandle(){
    form.value = {}
    open.value = true
}
function handleUpdate(e){
    form.value = form.value = JSON.parse(JSON.stringify(e))
    open.value = true
}
/** 删除按钮操作 */
function handleDelete(row) {
  proxy.$modal.confirm('是否确认删除标题为"' + row.topicName + '"的话题？').then(function() {
    loading.value = true;
    return delNewTopic(row.id);
  }).then(() => {
    loading.value = true;
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {
  }).finally(() => {
    loading.value = false;
  });
}
function submitForm(){
    buttonLoading.value = true
    form.value.type = '话题'
    if(form.value.id){
        upNewTopic(form.value).then(res=>{
            if(res.code==200){
                proxy.$modal.msgSuccess("修改成功");
                getList()
                open.value = false
            }
        }).finally(()=>{
            buttonLoading.value = false
        })
    }else{
        addNewTopic(form.value).then(res=>{
            if(res.code==200){
                proxy.$modal.msgSuccess("新增成功");
                getList()
                open.value = false
            }
        }).finally(()=>{
            buttonLoading.value = false
        })
    }
   
}
/** 查询极客侠后台管理系统本地消耗列表 */
function getList() {
  loading.value = true;
  queryParams.value.type = '话题'
  newTopicList(queryParams.value).then(response => {
    localLifeTableList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

function cancel(e) {
  open.value = false
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  
  getList();
}
getList();
</script>
<style scoped lang="scss">
.container {
  padding: 0 10px;
  box-sizing: border-box;
  overflow-y: auto;
  .comment {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-bottom: 1px solid #f2f6fc;
    .info {
      display: flex;
      align-items: center;
      .avatar {
        border-radius: 50%;
      }
      .right {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        .name {
          font-size: 16px;
          color: #303133;
          margin-bottom: 5px;
          font-weight: 500;
        }
        .date {
          font-size: 12px;
          color: #909399;
        }
      }
    }
    .content {
      font-size: 16px;
      color: #303133;
      line-height: 20px;
      padding: 10px 0;
      display: flex;
      justify-content: space-between;
    }
    .control {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #909399;
      .like {
        display: flex;
        align-items: center;
        margin-right: 20px;
        cursor: pointer;
        &.active,
        &:hover {
          color: #409eff;
        }
        .iconfont {
          font-size: 14px;
          margin-right: 5px;
        }
      }
      .comment-reply {
        display: flex;
        align-items: center;
        cursor: pointer;
        &:hover {
          color: #333;
        }
        .iconfont {
          font-size: 16px;
          margin-right: 5px;
        }
      }
    }
    .reply {
      margin: 10px 0;
      border-left: 2px solid #dcdfe6;
      .item {
        margin: 0 10px;
        padding: 10px 0;
        border-bottom: 1px dashed #ebeef5;
        .reply-content-reply{
          display: flex;
          justify-content: space-between;
          .reply-content {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #303133;
            .avatar {
              margin-right: 10px;
            }
            .from-name {
              color: #409eff;
            }
            .to-name {
              color: #409eff;
              margin-left: 5px;
              margin-right: 5px;
            }
          }
        }
        .reply-bottom {
          display: flex;
          align-items: center;
          margin-top: 6px;
          font-size: 12px;
          color: #909399;
          .reply-text {
            display: flex;
            align-items: center;
            margin-left: 10px;
            cursor: pointer;
            &:hover {
              color: #333;
            }
            .icon-comment {
              margin-right: 5px;
            }
          }
        }
      }
      .write-reply {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #909399;
        padding: 10px;
        cursor: pointer;
        &:hover {
          color: #303133;
        }
        .el-icon-edit {
          margin-right: 5px;
        }
      }
      .fade-enter-active,
      fade-leave-active {
        transition: opacity 0.5s;
      }
      .fade-enter,
      .fade-leave-to {
        opacity: 0;
      }
      .input-wrapper {
        padding: 10px;
        .gray-bg-input,
        .el-input__inner {
          /*background-color: #67C23A;*/
          ::after {
            content: "";
          }
        }
        .btn-control {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          padding-top: 10px;
          .cancel {
            font-size: 16px;
            color: #606266;
            margin-right: 20px;
            cursor: pointer;
            &:hover {
              color: #333;
            }
          }
          .confirm {
            font-size: 16px;
          }
        }
      }
    }
  }
}
.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2036;
}
</style>

